<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<block v-else>
		<view class="container">
			<view class="address_block">
				<view class="item1">
					<textarea name="" v-model="addressIMEI" id="" cols="30" rows="10" maxlength="50" placeholder="输入电话地址等信息智能识别">
					</textarea>
						<view class="item_btn" @click="addressFun()">
							智能识别
						</view>
				</view>
			</view>
			<view class="block">
				<view class="item">
					<view class="item_title">
						<span>*</span>
						姓名
					</view>
					<input type="text" v-model="trueName" />
				</view>
				<view class="item">
					<view class="item_title">
						<span>*</span>
						联系电话
					</view>

					<input type="tel" v-model="phone" />
				</view>
			</view>

			<view class="block">
				<view class="item">
					<view class="item_title">
						<span>*</span>
						所在地区
					</view>
					<view class="item_city" @click="showCity = true">
						<picker mode="region" :value="region" @change="chooseAddressInfo">
							<view class="picker">
								{{addressinfo}}
							</view>
						</picker>
					</view>
				</view>

				<view class="item1">
					<view class="item_title">
						<span>*</span>
						详细地址
					</view>
					<textarea v-model="address" disable-default-padding cols="30" rows="10" maxlength="50"></textarea>
				</view>
			</view>
			<view class="block">
				<view class="item" @click="changeDefault">
					<view class="item_title">
						设为默认地址
					</view>
					<view class="labelImg">
						<image :src="defAddressImg()" mode="aspectFill"></image>
					</view>
				</view>
				
			</view>


			<view class="saveBox">
				<view class="btn delBtn" @click="delCustom">删除</view>
				<view class="btn saveBtn" @click="submit">保存</view>
			</view>
		</view>
	</block>
</template>

<script>
	export default {
		data() {
			return {
				load: false,
				customID: '',
				trueName: '',
				phone: '',
				company: '',
				address: '',
				position: '',
				showCity: true,
				region:[],
				customer: {},
				addressIMEI:''
			};
		},

		computed: {
			addressinfo(){
				if(this.region) {
					let list = this.region;
					if (list[0] == list[1]) {
						list.splice(0,1)
					}
					return list.join('') || '请选择';
				}
				
			},
		},
		watch: {

		},

		onReady() {

		},
		async onLoad(e) {
			this.customer = this.$store.state.addressMsg;
			
			this.trueName = this.customer.Accepter
			this.phone = this.customer.Phone
			this.region = [this.customer.Province, this.customer.City, this.customer.Area]
			this.address = this.customer.Address
			this.company = this.customer.Company
			this.position = this.customer.Tag
			this.customID = this.customer.ID
			
			this.load = true;
		},
		async onShow() {
		},
		onUnload() {
			uni.$off('editCustom');
		},
		methods: {
			async addressFun(){
				if(!this.addressIMEI){
					this.$pv.msg('请输入内容')
					return
				}
				let res = await this.$api.post('/Common/GetAddress',{address:this.addressIMEI})
				if(res.data.code==200){
					let con = res.data.data[0]
					this.trueName = con.name
					this.address = con.address
					this.phone = con.mobile[0]
					let site = con.xzq
					this.region = [site.province,site.city,site.district]
				}else{
					this.$pv.msg(res.data.message)
				}
				
			},
			defAddressImg(item) {
				let noImg = 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17225829987891181.png';
				let yesImg = 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722582976430634.png';
				return this.customer.IsDefault==1 ? yesImg : noImg;
			},
			changeDefault(){
				this.customer.IsDefault==0 ? this.customer.IsDefault=1 : this.customer.IsDefault=0
			},
			async delCustom() {
				const res = await this.$api.post('/UserAddress/Delete', {
					ID: this.customID
				});
							
				if (res.code == 0) {
					this.$pv.msg("删除成功")
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					uni.showToast({
						title: "删除失败",
						icon: 'error',
						duration: 2000
					})
				}
			},
			
			async submit() {
				let that = this
				if (that.trueName == '') {
					that.$pv.msg("请输入姓名")
					return
				}
				if (that.phone == '') {
					that.$pv.msg("请输入联系方式")
					return
				}
				if (that.region == 0) {
					that.$pv.msg("请选择地区")
					return
				}
				if (that.address == '') {
					that.$pv.msg("请输入详细地址")
					return
				}
				const res = await this.$api.post('/UserAddress/Edit', {
					Accepter: that.trueName,
					Phone: that.phone,
					Province: that.region[0],
					City: that.region[1],
					Area: that.region[2],
					Address: that.address,
					ID: that.customID,// ID
					IsDefault:this.customer.IsDefault==0 ? 0 : 1
				});
			
				if (res.code == 0) {
					that.$pv.msg("修改成功")
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					uni.showToast({
						title: "修改失败",
						icon: 'error',
						duration: 2000
					})
				}
			
			},
			
			// 选择地区
			chooseAddressInfo(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.region = e.detail.value;
			},
		},
	};
</script>

<style lang="scss">
	page {
		// height: 100%;
		background: #f6f6f6;
	}

	.container {
		padding: 20rpx 0 0 0;
		display: flex;
		flex-direction: column;
		.address_block{
			width: 100%;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 24rpx;
			.item1 {
				position: relative;
				.item_btn{
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
					border-radius: 44rpx;
					font-size: 26rpx;
					color: #fff;
					padding: 6rpx 14rpx;
				}
				.item_title {
					font-size: 32rpx;
					color: #333333;
					margin: 30rpx 0 20rpx 0;
					
			
					span {
						font-size: 32rpx;
						color: #FF6030;
					}
				}
			
				textarea {
					width: 100%;
					box-sizing: border-box;
					height: 300rpx;
					background: #F8F8F8;
					border-radius: 16rpx;
					font-size: 28rpx;
					color: #000;
					padding: 30rpx 20rpx;
					padding-bottom: 70rpx;
					margin-bottom: 30rpx;
					
				}
			}
		}
		.block {
			width: 100%;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding-left: 30rpx;

			.item {
				width: 100%;
				height: 107rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #E4E4E4;

				.item_title {
					font-size: 32rpx;
					color: #333333;

					span {
						font-size: 32rpx;
						color: #FF6030;
					}
				}
				.labelImg {
					width: 46rpx;
					height: 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
					image {
						width: 80%;
						height: 80%;
					}
				}
				.item_city {
					font-size: 32rpx;
					color: #333333;
					width: 76%;
					margin-right: 4%;
					padding-left: 20rpx;
				}

				input {
					font-size: 32rpx;
					color: #000;
					width: 76%;
					text-align: left;
					margin-right: 4%;
					padding-left: 20rpx;
					box-sizing: border-box;
				}
			}

			.item:last-child {
				border-bottom: none;
			}

			.item1 {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx 30rpx 0 ;
				.item_title {
					font-size: 32rpx;
					color: #333333;
					margin-top: -2rpx;
			
					span {
						font-size: 32rpx;
						color: #FF6030;
					}
				}
			
				textarea {
					min-height: 120rpx;
					height: 120rpx;
					padding: 0;
					font-size: 32rpx;
					color: #000;
					flex: 1;
					margin-left: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.saveBox {
			width: 100%;
			height: 255rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			
			.delBtn {
				width: 670rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
			}

			.saveBtn {
				width: 670rpx;
				height: 88rpx;
				background: linear-gradient( 98deg, #FFAD26 0%, #FE4E01 100%);
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>